<template>
	<view class="page">
		<navbar title="蜂竞技-慧眼识词-创建房间" />

		<!-- 创建房间确认弹框 -->
		<selectContentView v-if="showPromptbox" :msg="msg" confirmTitle="确认" cancelTitle="取消" @confirm="confirmCreate"
			@cancel="showPromptbox=false"></selectContentView>

		<view class="container">
			<view class="page-h1 hzgb">{{user_info.username}}的房间</view>
			<view class="pwd">
				<uv-input class="pwd-input" :type="text" placeholder="设置房间密码"
					placeholderStyle="font-size: 14px;text-align: center;" v-model="pwd"></uv-input>
				<!-- <image class="eye" @click="eyeFn()"
					:src="'../../../static/image/icon_pwd' + (pwdType === 'text' ? '' : '_hide') + '.png'" mode="">
				</image> -->
			</view>
			<view class="page-h3">选择组别
				<view class="btn-en">Select Group</view>
			</view>
			<view class="flex">
				<view class="float" v-for="(item, index) in type_list" :key="index">
					<view @click="fnSelectType(item, index)" class="level-item"
						:class="current_type_info.id === item.id ? 'active' : ''">
						<view class="level-icon">
							<image class="icon" src="/static/image/fengyongyanxuan/game-hysc.png" mode="heightFix">
							</image>
						</view>
						<view class="label">{{item.title}}
							<view class="title-en-common-10">{{ item.alias }}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="false" class="page-h3">选择人数
				<view class="btn-en"> Select Number of spellers</view>
			</view>
			<view v-show="false" class="card">
				<view class="slider_box">
					<uv-slider v-model="people_num" @change="changePeopleNum" :min="game_config.min_people_num"
						:max="game_config.max_people_num" blockSize="28" step="1" activeColor="#f0d76f"
						inactiveColor="#fff" block-color="#deba5e" blockStyle="height:70px"></uv-slider>
					<view class="slider_num">
						<view>{{game_config.min_people_num}}</view>
						<view>{{game_config.max_people_num}}</view>
					</view>
					<view class="slider_btn">
						{{people_num}}人
					</view>
				</view>
			</view>
			<view class="page-h3" style="height: 50px;"></view>
			<view class="btns">
				<view class="btn btn1" @click="fnCancelCreate()">取消
					<view class="btn-en">Cancel</view>
				</view>
				<view class="btn btn2" @click="fnCreateRoom()">确认创建
					<view class="btn-en">Confirm Create</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navbar from '../../../components/gamesNav.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			navbar
		},
		data() {
			return {
				text: '',
				game_mode: '',
				game_config: {},

				pwd: '',
				people_num: 2,
				pwdType: 'password',

				current_type_info: {
					'id': 4001,
					'name': '小学组',
					enName: 'Primary School Group',
					'status': 1
				},
				type_list: [],
				current_type_info: {},
				userLevel: 0, // 当前选手所在组别
				user_info: {},
				game_info: {},
				showPromptbox: false,
			};
		},
		onLoad(options) {
			var that = this;
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;
			console.log(that.user_info, that.game_info);
			// 当前选手组别
			const grade = Number(this.user_info.grade)
			this.userLevel = grade < 7 ? 1 : grade < 10 ? 2 : grade < 12 ? 3 : 4
			console.log(this.userLevel)
			console.log('创建房间：', that.game_info, that.game_mode)

			that.getGameConfigInfo();
		},
		mounted() {
			const that = this
			that.getTypeList();
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		onShow() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		methods: {
			// 获取游戏配置信息
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.game_config = res.data;
						that.people_num = that.game_config.default_people_num;
					}
				})
			},

			// 创建房间
			fnCreateRoom() {
				var that = this;
				that.msg = "您正在创建【" + that.game_info.name + "】游戏，人数" + that.people_num + "人";
				that.showPromptbox = true
			},

			// 取消创建房间
			fnCancelCreate() {
				var that = this;
				uni.navigateBack();
			},

			// 确认创建
			confirmCreate() {
				this.showPromptbox = false
				var that = this;
				const params = {
					matchType: 'hysc', //慧眼识词

					game_id: that.game_info.id,
					people_num: that.people_num,
					pwd: that.pwd,
					type_id: that.current_type_info.id,
					game_mode: that.game_mode,
					groupname: that.game_mode + '|' + that.current_type_info.title,
				}

				that.$http.createRoom(params).then(res => {
					if (res.code === 200) {
						var group_info = res.data;
						uni.redirectTo({
							url: '/pages/games/hysc/game_hysc' +
								'?group_info=' + encodeURIComponent(JSON.stringify(group_info)) +
								'&game_mode=' + that.game_mode +
								'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info))
						})
					}
				})
			},

			fnSelectType(item, index) {
				var that = this;
				if (!item.usable) {
					uni.showToast({
						title: '暂不可用',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				that.current_type_info = item;
			},

			// 获取分组
			getTypeList() {
				var that = this;
				that.$http.getTypeList({
					pid: 6012,
				}).then(res => {
					if (res.code === 200) {
						that.type_list = res.data;
						this.current_type_info = this.type_list.find(item => item.sort_number == this.userLevel) ||
							this.ciku_list[0]
						this.type_list.forEach(item => {
							if (item.sort_number === this.userLevel || item.sort_number === 4) {
								item.usable = true
							} else {
								item.usable = false
							}
						})
						console.log(this.type_list)
					}
				})
			},

			// 改变人数
			changePeopleNum(e) {
				console.log(e)
			},

			eyeFn() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
			},

			cancelFn() {},
		}
	}
</script>

<style lang="less">
	.page {
		background-image: url(/static/image/app/gameBg.png);
		// background-color: #f7b52c;
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		font-family: hzgb;
		color: #fff;
	}

	.container {
		padding: 24px 14px;
	}

	.page-h1 {
		font-size: 24px;
	}

	.page-h3 {
		font-size: 16px;
		text-align: center;
		margin-bottom: 16px;
		margin-top: 40px;
	}

	.pwd-input {
		border: none;
		border-width: 0 !important;
		font-size: 14px;
		font-family: normal;
		text-align: center;

		&.uv-border {
			border-width: 0 !important;
		}
	}

	.pwd {
		width: 100%;
		height: 36px;
		background: #fff8e1;
		border-radius: 32px;
		box-sizing: border-box;
		padding-left: 8px;
		padding-right: 2px;
		margin-top: 40px;
		position: relative;

		.eye {
			position: absolute;
			right: 10px;
			top: 0;
			height: 30px;
			width: 30px;
			margin-top: 3px;
		}
	}

	// 创建房间页面，选择人数的滑块样式
	::v-deep .uni-slider-handle-wrapper {
		height: 14px !important;
		border-radius: 14px !important;
	}

	::v-deep .uni-slider-track {
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
	}

	.card {
		background: rgba(255, 255, 255, 0.15);
		border-radius: 14px;
		padding: 10px 10px 20px;
	}

	.slider_num {
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
	}

	.slider_btn {
		border: 2px solid #242018;
		background: linear-gradient(to bottom, #151004, #353330);
		height: 30px;
		width: 110px;
		text-align: center;
		line-height: 26px;
		border-radius: 30px;
		margin: 0 auto;
		font-size: 14px;
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 60px 0 40px;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;

		.btn {
			width: 140px;
			height: 40px;
			text-align: center;
			// line-height: 40px;
			padding-top: 6px;
			font-size: 16px;
			border-radius: 10px;
		}

		.btn1 {
			background: linear-gradient(to top, #130e00, #373632);
			box-shadow: 0 6px 0 0 #363531;
		}

		.btn2 {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0 6px 0 0 #d9b059;
			color: #000;
		}
	}

	.flex {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		overflow: hidden
	}

	.float {
		float: left;
		width: 50%;
		padding: 6px;
		box-sizing: border-box;
	}

	.level-item {
		width: 100%;
		background: rgba(255, 255, 255, 0.15);
		border: 3px solid transparent;
		border-radius: 14px;
		padding: 10px;
		text-align: center;
		font-size: 16px;
		display: flex;
		align-items: center;

		.level-icon {
			// background-image: url(/static/image/fengyongyanxuan/game-hysc.png);
			// background-size: contain;
			// background-position: center;
			// background-repeat: no-repeat;
			width: 60px;
			height: 60px;
			// margin-bottom: 12px;
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 6px;
			border: 2px solid #fde458;

			.icon {
				width: 36px;
				height: 36px;
				margin-bottom: 8px;
			}
		}

		.label {
			flex: 1;
		}

		&.active {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
			color: #000;

			.level-icon {
				background: linear-gradient(to bottom, #130e00, #373632);
				border-color: #31302d;
			}
		}
	}

	::v-deep .uni-input-input {
		text-align: center;
	}
</style>